<template>
  <div class="placeOrder warp">
    <div class="poAddressList">
      <div class="poAddListTit">
        <span>请选择收货地址</span>
        <span @click="newAddressFn">新增地址</span>
      </div>
      <div class="poAddListBox" v-if="addressData.length === 0">
        <span>暂无收货信息</span>
      </div>
      <div class="poAddListBox" v-if="addressData.length !== 0">
        <div class="title">收货人信息：</div>
        <div class="addressItem">
          <div class="addressInfo">
            <span class="userName">{{ addressObj.receiveName }}</span>
            <span class="userAddress">{{ addressObj.receiveAdress }} {{ addressObj.address }}</span>
            <span class="userPhone">{{ addressObj.receivePhone }}</span>
          </div>
          <span class="changeAddress" @click="showChangeAddress">
            <icon-svg style="font-size: 16px;" icon-class="exchange" />
            切换
          </span>
        </div>
      </div>
    </div>

    <!-- 订单商品信息 -->
    <div class="shoplist">
      <div class="shopTitle">请确认订单信息</div>
      <ShopOrder v-for="item in this.settlement.shops" :key="item.shopId" :type="state" :shopsData="item">
        <template slot="coupon">
          <div class="couponContainer">
            <div class="couponItem" v-for="(coupon, index) of item.shopCoupons" :key="index">
              <CouponBox :type="'商家券'" :couponItem="coupon" :isSelect="coupon.checked" @couponSelect="couponSelect" />
            </div>
          </div>
        </template>
      </ShopOrder>
    </div>
    <!-- 优卡支付 -->
    <div class="placeOrderBtn1" v-if="infoCommodity[0]&&infoCommodity[0].shopId== 225 && moneyShow">
      <div class="payInfo flex-between">
        <div style="font-size:16px">使用优卡支付 ( 剩余<span> {{moneyRatio.toFixed(2)}}</span>元 )</div>
        <el-checkbox id="my-checkbox" v-model="checkedStateCard" @change="updateCheckedStateCard" />
      </div>
    </div>
    <!-- 积分换购 -->
    <div class="placeOrderBtn1" v-if="settlement.shops[0] && settlement.shops[0].shopId == 222">
      <div class="payInfo flex-between">
        <div style="font-size:16px">可用 <span>{{integralAvaiFix}}积分</span> 抵扣{{deductionMoneyFix}}元</div>
        <el-checkbox id="my-checkbox" v-model="checkedState" @change="updateCheckedState" />
      </div>
    </div>

    <!-- 优惠券信息 -->
    <!-- 平台券 -->
    <div class="couponContainer" v-if="this.settlement.coupons.length">
      <p>平台券</p>
      <div class="couponItem" v-for="(item, index) of this.settlement.coupons" :key="index">
        <CouponBox :type="'平台券'" :couponItem="item" :isSelect="item.checked" @couponSelect="couponSelect" />
      </div>
    </div>
    <div class="payBox">
      <div class="payTit">选择支付方式</div>
      <div class="payList">
        <span class="typeBox" :class="{payActive: payType === 'alipay'}" @click="selectPay(type = 'alipay')">
          <i class="iconfont">&#xe627;</i>
          <b class="iconfont">&#xe612;</b>
          支付宝支付
        </span>
        <span class="typeBox" :class="{payActive: payType === 'weChat'}" @click="selectPay(payType = 'weChat')">
          <i class="iconfont">&#xe686;</i>
          <b class="iconfont">&#xe612;</b>
          微信支付
        </span>
        <span class="typeBox" :class="{payActive: payType === 'unionPay'}" @click="selectPay(payType = 'unionPay')">
          <img style="width: 26px;height: 26px;margin-right:5px" src="../../../static/image/unionPay.svg" alt="">
          <b class="iconfont">&#xe612;</b>

          <!-- <i class="iconfont">&#xe686;</i>
          <b class="iconfont">&#xe612;</b> -->
          银联支付
        </span>
        <span v-if="settlement.shops[0] && settlement.shops[0].shopId == 222" class="typeBox" :class="{payActive: payType === 'weChat1'}" @click="selectPay(payType = 'weChat1')">
          <i class="iconfont">&#xe64e;</i>
          <b class="iconfont">&#xe612;</b>
          积分换购
        </span>
      </div>
    </div>
    <div class="placeOrderBtn">
      <div class="payInfo">
        <!-- {{methodPayment}} -->
        <span>运费：+¥{{(distributionPrice || 0).toFixed(2)}}</span>
        <span>平台优惠：-￥{{(couponAmount).toFixed(2)}}</span>
        <span>商家优惠：-￥{{(couponShopAmount).toFixed(2)}}</span>
        <span>积分抵扣：-￥{{(deductionMoney).toFixed(2)}}</span>
        <span>优卡抵扣：-￥{{(moneyPriceReadable).toFixed(2)}}</span>
        <span>需付款：<b>￥{{(totalPrice).toFixed(2)}}</b></span>
      </div>
      <el-button v-if="disabledButton" class="submitOrder unDisButton" @click="clickTips">提交订单</el-button>
      <el-button v-else class="submitOrder" @click="clickPayOrder" :loading="btnLoading">提交订单</el-button>
    </div>
    <!-- 付款提示 -->
    <el-dialog title="请在1小时内完成付款，否则订单会被系统取消" :visible.sync="paymentDialog" width="30%">
      <div class="payment">
        <div class="paymentBox">
          <div class="successBox">
            <span>支付成功请点击</span>
            <el-button type="primary" plain>已完成付款</el-button>
          </div>
          <div class="errorBox">
            <span>遇到问题请点击</span>
            <el-button type="primary" v-throttle>重新付款</el-button>
          </div>
        </div>
        <div class="paymentInfo">
          <p>注：重新付款前，请关闭之前的付款页面</p>
          <p>如有疑问或需要帮助，请进入<b>帮助中心</b>或联系<b>在线客服</b></p>
        </div>
      </div>
    </el-dialog>

    <!-- 微信支付 -->
    <el-dialog class="weChat" :title="methodPayment+'支付'" :visible.sync="weChatDialog" :before-close="handleClose" width="500px">
      <div class="qCode">
        <div class="wechatTitle">
          <div class="tips">
            <p>请使用{{methodPayment}}扫一扫</p>
            <p>扫描二维码支付</p>
          </div>
          <div>￥{{ payInfo.money }}</div>
        </div>
        <img class="code" :src="payInfo.url" alt="">
      </div>
    </el-dialog>
    <!-- 新建收货地址 -->
    <el-dialog :title="addressDialogTitle" :visible.sync="newAddressDialog" width="630px">
      <AddAddress @hideAddDialog="hideAddDialog" @cancelAdd="closeAdd" />
    </el-dialog>
    <!-- 切换地址 -->
    <el-dialog title="选择收货地址" :visible.sync="changeAddressDialog" :close-on-click-modal="false" :destroy-on-close="false">
      <ul class="addressTable">
        <li class="addressListItem" v-for="(item, index) of addressData" :key="index" :class="{addressActive: curAdd === index}" @click="curAdd = index">
          <div class="top com">
            <div class="left">姓名：
              <span>{{ item.receiveName }}</span> <span>{{ item.receivePhone }}</span>
            </div>
            <div class="setDef" :class="{colorActive: item.ifDefault}" @click="changeAddress(item)">编辑</div>
          </div>
          <div class="bottom com">
            <div class="left">
              地址：<span>{{ item.receiveAdress }} {{ item.address }}</span>
              <span v-if="item.ifDefault" class="defTip">默认地址</span>
            </div>
            <div class="setDef" v-if="!item.ifDefault" @click="setDefAddress(item)">设为默认地址</div>
          </div>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button class="combtns" @click="changeAddressDialog = false" v-throttle>取消</el-button>
        <el-button class="combtns btnBlack" @click="setChangeAddress" v-throttle>确认</el-button>
      </span>
    </el-dialog>
    <!-- 支付失败 -->
    <el-dialog title="温馨提示" :visible.sync="errorDialog" width="300px">
      <div class="errorDialog">
        <div class="errorTit">
          <span class="iconfont">&#xe620;</span>
          <p>您的订单支付失败</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="btns" @click="toOrder" v-throttle>查看订单</el-button>
          <el-button class="btns pay" type="primary" @click="clickPayOrder" v-throttle>重新支付</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { TextToCode } from 'element-china-area-data'
import { mapGetters, mapMutations } from 'vuex'

import AddAddress from '@/components/orderInfo/addAddress'
import ShopOrder from '@/views/placeOrder/components/shopOrder.vue'
import CouponBox from '@/views/placeOrder/components/couponBox.vue'
import { getAllAddressList, addAddress, updateAddress } from '@/api/user/address.js'
import {
  orderSubmit,
  getSettlement,
  getGroupSettle,
  checkOrderResult,
  getIntegralRatioAPI,
  paymentFreeAPI,
  getUserPhoneCardAPI
} from '@/api/user/order.js'
import { getCartList, deleteCartItem } from '@/api/user/cart.js'
export default {
  name: 'placeOrder',
  components: {
    AddAddress,
    ShopOrder,
    CouponBox
  },
  data() {
    return {
      moneyPrice: 0, // 可用的优卡 剩余
      moneyShow: false,
      infoCommodity: [],
      cardId: '',
      moneyRatio: 0, // 剩余余额
      priceOriginal: 0.0, // 原价
      integralRatio: null, // 积分比
      checkedState: false,
      checkedStateCard: false,
      deductionMoneyFix: 0, // 不可修改的折扣价
      integralAvaiFix: 0, // 不可修改的积分
      deductionMoney: 0, // 抵扣的money
      integralAvai: null, // 可用积分
      addressData: [],
      addressDialogTitle: '新建收货地址',
      newAddressDialog: false,
      paymentDialog: false,
      weChatDialog: false,
      payType: '',
      errorDialog: false,
      promotionInfoDTO: {
        couponId: 0,
        ifAdd: 1,
        reduceMoney: 0
      },
      settlement: {
        coupons: [],
        shops: []
      },
      totalPrice: 0,
      shopIndex: 0, // 当前操作的优惠券所在店铺的索引
      showDiscount: false,
      currentCoupon: null,
      currentShopCoupon: null,
      currentDiscount: 0,
      discountTotal: 0, // 优惠总额
      couponCurrent: {},
      shopCouponCurrent: {},
      submitData: {
        receiveId: '',
        couponId: '',
        price: '',
        remark: '',
        shops: []
      },
      curAdd: 0,
      currentAddressId: '',
      addressObj: {
        receiveName: '',
        receivePhone: '',
        receiveAdress: '',
        address: ''
      }, // 地址展示信息
      remarksInfo: '',
      payInfo: {},
      chatTimer: '',
      activityType: 0,
      workData: {},
      paramShops: [],
      type: null,
      ifWork: 0,
      state: 0,
      distributionPrice: 0, // 总运费
      changeAddressDialog: false,
      btnLoading: false,
      checkedPlatformCoupon: undefined, // 选中的平台券
      selectShopCoupon: [], // 商家券
      couponAmount: 0, // 平台券总折扣
      couponShopAmount: 0, // 商家券总折扣
      hasCheck: 0, // 含有不可叠加券： 1.平台券  2.商家券
      disabledButton: false // 获地址是否符合商家配送范围内
    }
  },
  created() {
    this.getIntegralRatio() // 获取积分比
    if (this.$route.query.works) {
      this.workData = JSON.parse(this.$route.query.works)
    }
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
    if (this.$route.query.ifWork !== undefined) {
      this.ifWork = parseInt(this.$route.query.ifWork)
    }
    if (this.$route.query.activityType !== undefined) {
      this.activityType = parseInt(this.$route.query.activityType)
    }
    if (this.$route.query.shops) {
      this.paramShops = JSON.parse(this.$route.query.shops)
    }
    if (this.paramShops.shopDiscountId) {
      this.state = 3
    }
    if (this.paramShops.shopSeckillId) {
      this.state = 2
    }
    if (this.workData.shopGroupWorkId) {
      this.state = 1
    }
  },
  watch: {
    // checkedState(newValue, oldValue) {
    //   // 侦听到数据变化之后，需要完成的行为
    //   console.log('数据改变了', newValue, oldValue)
    //   // alert('已经改了别点了')
    //   if (newValue) {
    //     this.payType = 'weChat1'
    //     this.calcCredit()
    //   } else {
    //     this.payType = 'weChat'
    //     this.deductionMoney = 0.0
    //     this.totalPrice = this.priceOriginal
    //   }
    // }
    checkedState: {
      handler(newValue, oldValue) {
        console.log('数据改变了', newValue, oldValue)
        // alert('已经改了别点了')
        if (newValue) {
          this.payType = 'weChat1'
          this.calcCredit()
        } else {
          this.payType = 'weChat'
          this.deductionMoney = 0.0
          this.totalPrice = this.priceOriginal
        }
      },
      immediate: true
      // 侦听到数据变化之后，需要完成的行为
    },
    checkedStateCard: {
      handler(newValue, oldValue) {
        console.log('数据改变了', newValue, oldValue)
        // alert('已经改了别点了')
        if (newValue) {
          // this.payType = 'weChat1'
          // this.calcCredit()
          this.totalPrice = this.totalPrice - this.moneyPrice
          this.totalPrice = this.totalPrice <= 0 ? 0 : this.totalPrice
          this.moneyPriceReadable = this.moneyPrice
        } else {
          // this.payType = 'weChat'
          // this.deductionMoney = 0.0
          this.totalPrice = this.priceOriginal
          this.moneyPriceReadable = 0
        }
      },
      immediate: true
      // 侦听到数据变化之后，需要完成的行为
    }
  },
  mounted() {
    // console.log(this.$route.query.shops)
    this.infoCommodity = JSON.parse(this.$route.query.shops)
    // console.log(this.infoCommodity.shopId)

    // 获取地址列表
    this.getAddressList()
    if (this.$route.query.type) {
      this.getSetProList()
    } else {
      this.getWorkSettlement()
    }
    this.payType = 'weChat'
    this.getCard()
  },
  computed: {
    ...mapGetters([
      'newAddress',
      'userInfo' // 新增修改收货地址
    ]),
    shopIds() {
      return this.settlement.shops.map(item => {
        return item.shopId
      })
    },
    methodPayment() {
      if (this.payType == 'weChat') {
        return '微信'
      } else if (this.payType == 'alipay') {
        return '支付宝'
      }
    }
  },
  methods: {
    ...mapMutations({
      seNewAddress: 'SET_NEWADDRESS', // 新增修改收货地址
      setAreacode: 'SET_AREACODE', // 新增修改收货地址
      setCartNumber: 'SET_CARTNUMBER', // 购物车数量
      setShoppingCart: 'SET_SHOPPINGCART' // 购物车
    }),
    async getCard() {
      console.log(this.userInfo.buyerUserId)
      const res = await getUserPhoneCardAPI({
        userId: this.userInfo.buyerUserId
      })
      // console.log(res)
      // return
      this.moneyRatio = res.data.data.money // 积分比
      this.cardId = res.data.data.id
    },
    async getIntegralRatio() {
      const res = await getIntegralRatioAPI({
        name: 'credit_exchange_rate'
      })
      this.integralRatio = parseFloat(res.data.data.dictDescribe)
      // NET.request(API.Query, {
      //   name: 'credit_exchange_rate'
      // }, 'GET').then(res => {
      //   this.integralRatio = parseFloat(res.data.dictDescribe) // 积分比
      // }).catch(res => {
      //   console.log('平台端未配置积分兑换比例(1积分抵扣多少金额)')
      // })
    },
    /**
     * 此函数用于计算优卡支付
     */
    calcCard() {
      // 计算抵扣价格
      // console.log(this.moneyRatio && this.storeId == 225)
      if (this.moneyRatio && this.infoCommodity[0].shopId == 225) {
        // console.log(this.settlement.shops)
        this.moneyPrice =
          this.moneyRatio > this.settlement.shops[0].total
            ? this.settlement.shops[0].total
            : this.moneyRatio
        // this.moneyPriceReadable = this.moneyPrice
        if (this.checkedStateCard) {
          this.totalPrice = this.totalPrice - this.moneyPrice
          this.totalPrice = this.totalPrice <= 0 ? 0 : this.totalPrice
        }
        this.moneyShow = true
      } else {
        this.moneyShow = false
      }
    },

    /**
     * 此函数用于计算积分
     */
    calcCredit() {
      //  let remainUserCredit = 100
      let remainUserCredit = this.settlement.userTotalCredit // 我的全部积分
      //  let remainUserCredit = 1012 // 我的全部积分
      //  let skuCreditMap = this.settlement.skuCreditMap
      // //  let goodsId = this.settlement.shops[0].skus[0].skuId
      //  let goodsId = this.settlement.shops[0].skus.map(item => {
      //   return item.skuId
      //  })
      //  let integralAvaiArr = goodsId.map(item => skuCreditMap[item] || 0)
      //  let integralSum = 0 // 全部商品需要的全部积分
      //  integralAvaiArr.forEach(item => {
      //      integralSum += item
      //  })
      let arr = []
      for (let key in this.settlement.skuCreditMap) {
        arr.push(this.settlement.skuCreditMap[key])
      }
      // console.log(arr)
      let integralAva = 0 // 可用的积分
      let priceDis = 0 // 折扣价
      this.settlement.shops[0].skus.forEach((item, i) => {
        if (remainUserCredit === 0) return
        if (arr[i] <= remainUserCredit) {
          integralAva += arr[i]
          priceDis += item.total
          remainUserCredit -= arr[i]
        } else {
          integralAva += remainUserCredit
          priceDis += remainUserCredit * this.integralRatio
          remainUserCredit = 0
        }
      })
      this.integralAvai = integralAva
      this.integralAvaiFix = integralAva
      this.deductionMoneyFix = priceDis.toFixed(2)
      // console.log('priceDis')
      // console.log(priceDis)

      this.deductionMoney = priceDis
      //  return
      //   if (this.deductionMoney >= this.totalPrice) {
      //   // 不可大于商品价格
      //   this.deductionMoney = this.totalPrice
      // }
      // 计算最终的结算价格
      if (this.deductionMoney) {
        this.totalPrice -= this.deductionMoney
      }
      //  this.deductionMoneyFix = this.deductionMoney
    },
    /**
     * 修改选择框的状态
     */
    updateCheckedState() {
      // this.checkedState = !this.checkedState
      // console.log(this.checkedState)
    },
    updateCheckedStateCard() {
      // this.checkedState = !this.checkedState
      // console.log(this.checkedState)
    },
    // 获取地址列表
    async getAddressList() {
      const response = await getAllAddressList({
        page: 1,
        pageSize: 100
      })
      const res = response.data
      if (res.code === '200') {
        this.addressData = res.data.list
        if (this.addressData.length === 1) {
          // 只有1条，默认为收货地址
          this.currentAddressId = this.addressData[0].receiveId
          this.setPageAddressObj(this.addressData[0])
          return
        }
        this.addressData.forEach((item, index) => {
          if (item.ifDefault) {
            // 如果有默认地址时
            this.currentAddressId = item.receiveId
            this.setPageAddressObj(item)
          } else if (index === 0) {
            // 没有则优先选择第一个地址
            this.currentAddressId = item.receiveId
            this.setPageAddressObj(item)
          }
        })
      } else {
        this.$message.warning(res.message)
      }
    },
    // 设置收货渲染数据
    setPageAddressObj(item) {
      this.addressObj = {
        receiveName: item.receiveName,
        receivePhone: item.receivePhone,
        receiveAdress: item.receiveAdress,
        address: item.address
      }
    },
    // 新增地址
    async hideAddDialog() {
      this.newAddressDialog = false
      const response = await addAddress({
        receiveName: this.newAddress.receiveName,
        receivePhone: this.newAddress.receivePhone,
        receiveAdress: this.newAddress.receiveAdress,
        address: this.newAddress.address,
        label: '',
        ifDefault: this.newAddress.ifDefault ? 1 : 0
      })
      const res = response.data
      if (res.code === '200') {
        this.$message({
          message: '地址添加成功',
          type: 'success'
        })
        this.page = 1
        this.addressData = []
        this.setAreacode([])
        this.getAddressList()
        if (this.newAddress.ifDefault) {
          if (this.$route.query.type) {
            this.getSetProList()
          } else {
            this.getWorkSettlement()
          }
        }
      } else {
        this.$message.error(res.message)
      }
    },
    // 取消新增地址
    closeAdd() {
      this.newAddressDialog = false
    },
    // 新增地址
    newAddressFn() {
      let obj = {
        receiveName: '',
        receivePhone: '',
        receiveAdress: '',
        address: '',
        label: '',
        ifDefault: false
      }
      this.setAreacode([])
      this.seNewAddress(obj)
      this.addressDialogTitle = '新增收货地址'
      this.newAddressDialog = true
    },
    showChangeAddress() {
      this.changeAddressDialog = true
    },
    // 修改收货地址
    setChangeAddress() {
      let item = this.addressData[this.curAdd]
      this.currentAddressId = item.receiveId
      this.addressObj = {
        receiveName: item.receiveName,
        receivePhone: item.receivePhone,
        receiveAdress: item.receiveAdress,
        address: item.address
      }
      this.changeAddressDialog = false
      if (this.$route.query.type) {
        this.getSetProList()
      } else {
        this.getWorkSettlement()
      }
    },
    // 修改地址信息
    changeAddress(item) {
      this.changeAddressDialog = false
      let addressData = item.receiveAdress.split('-')
      let areaData = []
      areaData.push(TextToCode[addressData[0]].code)
      areaData.push(TextToCode[addressData[0]][addressData[1]].code)
      areaData.push(TextToCode[addressData[0]][addressData[1]][addressData[2]].code)
      let currentItem = JSON.parse(JSON.stringify(item))
      this.seNewAddress(currentItem)
      this.setAreacode(areaData)
      this.addressDialogTitle = '修改收货地址'
      this.newAddressDialog = true
    },
    // 设置默认地址
    setDefAddress(item) {
      item.ifDefault = 1
      this.seNewAddress(item)
      this.updateAddressFun()
    },
    // 更新地址
    async updateAddressFun() {
      this.changeAddressDialog = false
      const response = await updateAddress({
        receiveId: this.newAddress.receiveId,
        receiveName: this.newAddress.receiveName,
        receivePhone: this.newAddress.receivePhone,
        receiveAdress: this.newAddress.receiveAdress,
        address: this.newAddress.address,
        label: '',
        ifDefault: this.newAddress.ifDefault.toString()
      })
      const res = response.data
      if (res.code === '200') {
        this.$message({
          message: '地址修改成功',
          type: 'success'
        })
        this.page = 1
        this.addressData = []
        this.setAreacode([])
        this.getAddressList()
      } else {
        this.$message.error(res.message)
      }
    },
    // 拼团商品结算查询
    async getWorkSettlement() {
      this.workData.receiveId = this.currentAddressId
      const rLoading = this.openLoading()
      this.distributionPrice = 0

      const response = await getGroupSettle(this.workData)
      const res = response.data
      if (res.code === '200') {
        this.successBackSettlement(res)
        rLoading.close()
      } else {
        this.$message.warning(res.message)
      }
    },
    // 查询结算产品列表
    async getSetProList() {
      const rLoading = this.openLoading()
      this.distributionPrice = 0
      const response = await getSettlement({
        type: this.type,
        shops: this.paramShops,
        ifWork: this.ifWork,
        receiveId: this.currentAddressId
      })
      const res = response.data
      if (res.code === '200') {
        this.successBackSettlement(res)
        rLoading.close()
      } else {
        this.$message.warning(res.message)
        this.$router.back()
      }
    },
    // 结算查询成功回调
    successBackSettlement(res) {
      this.disabledButton = false
      this.settlement = res.data
      this.currentAddressId = res.data.receive.receiveId || ''
      this.settlement.shops = res.data.shops || [] // 订单商家信息
      this.settlement.coupons.forEach((item, index) => {
        item.index = index
        item.type = 1
        item.discountAmount = 0
      })
      this.settlement.shops.forEach(item => {
        // 处理收获地址是否符合商家配送范围内
        if (item.receiveNotMatch) {
          this.disabledButton = item.receiveNotMatch
        }
        if (this.disabledButton) {
          this.clickTips()
        }
        // 处理商家券
        item.shopCoupons = item.shopCoupons.map((i, index) => {
          i.index = index
          i.type = 2 // type 1平台券 2商家券
          i.uniWebId = `${item.shopId}+${index}` // 创建一个前端单方面的唯一值，处理选中状态
          i.shopId = item.shopId // 方便后续确定优惠券
          i.discountAmount = 0
          return i
        })
        item.totalAfterDiscount = item.total
        this.distributionPrice += Number(item.distribution.distributionPrice) || 0
      })
      this.getTotal()
      // this.calcCredit()
    },
    // 选择优惠券
    couponSelect(val) {
      if (val.type === 1) {
        this.couponItemTap(val)
      } else {
        this.shopCouponItemTap(val)
      }
    },
    // 商家券 本方法参考uniapp代码的同名方法
    shopCouponItemTap(coupon) {
      const index = coupon.index
      this.shopIndex = this.shopIds.indexOf(coupon.shopId)

      // 取消选择优惠券
      if (coupon.checked) {
        coupon.checked = false
        coupon.discountAmount = 0
        this.settlement.shops[this.shopIndex].totalAfterDiscount =
          this.settlement.shops[this.shopIndex].total
        this.settlement.shops[this.shopIndex].currentCoupon = {}
        this.settlement.shops[this.shopIndex].skus.forEach(item => {
          item.buyerShopCouponId = null
        })
        this.selectShopCoupon = []
        this.getTotal()
        return false
      }

      if (this.settlement.shops[this.shopIndex].total < coupon.fullMoney) {
        this.$message.warning('不满足优惠券使用条件！')
      } else if (
        coupon.couponType === 1 &&
        this.settlement.shops[this.shopIndex].total < coupon.reduceMoney
      ) {
        this.$message.warning('不可使用大于商品金额的优惠劵！')
      } else {
        // 选择优惠券
        if (this.promotionInfoDTO.couponId !== 0) {
          this.$message.warning('此券不可与平台券叠加！')
          return false
        }
        if (coupon.couponType === 1) {
          if (coupon.reduceMoney >= this.settlement.shops[this.shopIndex].total) {
            this.$message.warning('优惠券优惠金额不能大于等于合计金额！')
            return false
          }
        }

        this.isShopCoupons = false
        this.shopCouIndex = index
        let useCoupon = this.useShopCoupon(this.shopIndex, this.shopCouIndex)
        if (useCoupon) {
          // 确认使用当前点击的商家券，先将所有的商家券取消选中
          for (let i = 0; i < this.selectShopCoupon.length; i++) {
            this.selectShopCoupon[i].checked = false
          }
          this.selectShopCoupon = []

          coupon.checked = true
          this.settlement.shops[this.shopIndex].id = coupon.id
          this.settlement.shops[this.shopIndex].currentCoupon = coupon
          this.settlement.shops[this.shopIndex].skus.forEach(item => {
            if (item.buyerShopCouponId > 0 && item.buyerShopCouponId !== coupon.shopCouponId) {
              item.buyerShopCouponId = null
            }
          })
          this.selectShopCoupon.push(coupon)
        } else {
          this.settlement.shops[this.shopIndex].totalAfterDiscount =
            this.settlement.shops[this.shopIndex].total
        }
        this.getTotal()
      }
    },
    // 平台券 本方法参考uniapp的同名方法
    couponItemTap(coupon) {
      if (!coupon.checked && this.selectShopCoupon.length) {
        // 判断商家券情况
        this.$message.warning('不可与商家券叠加使用！')
        return false
      }
      // 已选中的情况下取消选中
      if (coupon.checked) {
        let promotionInfoDTO = {}
        if (coupon.couponId) {
          promotionInfoDTO['couponId'] = 0
          promotionInfoDTO['ifAdd'] = 1
          promotionInfoDTO['reduceMoney'] = 0
        }
        this.promotionInfoDTO = promotionInfoDTO
        coupon.checked = false
        coupon.discountAmount = 0
        this.isShowDiscount = false
        this.checkedPlatformCoupon = undefined
        this.settlement.shops.forEach(shopItem => {
          if (shopItem.skus) {
            shopItem.skus.forEach(skuItem => {
              skuItem.buyerCouponId = null
            })
          }
        })
        this.getTotal()
      } else {
        // 先把所有已选中的平台优惠券改为未选中
        this.settlement.coupons.forEach(item => {
          item.checked = false
        })
        let totalPrice = 0 // 订单总价
        let shopsLen = this.settlement.shops.length // 结算页店铺数量
        let matchCouponSkuList = []
        for (let i = 0; i < shopsLen; i++) {
          let matchCouponNormalPrice = 0
          let priceCount = 0
          const curShop = this.settlement.shops[i]
          let skuLen = curShop.skus.length
          let tmpPriceSkuList = []
          for (let j = 0; j < skuLen; j++) {
            const curSku = curShop.skus[j]
            if (curSku.priceId > 0) {
              priceCount++
            }
            const ids = coupon.ids
            if (ids.indexOf(curSku.productId) > -1) {
              if (curSku.priceId > 0) {
                tmpPriceSkuList.push(curSku)
              } else {
                matchCouponSkuList.push(curSku)
                matchCouponNormalPrice = matchCouponNormalPrice + curSku.price * curSku.number
              }
            }
          }
          if (priceCount === tmpPriceSkuList.length) {
            totalPrice += curShop.priceAfterDiscount
            matchCouponSkuList = matchCouponSkuList.concat(tmpPriceSkuList)
          }
          totalPrice += matchCouponNormalPrice
        }
        if (this.settlement.shops[this.shopIndex].total < coupon.fullMoney) {
          this.$message.warning('不满足优惠券使用条件！')
        }
        if (coupon.couponType === 1 && coupon.reduceMoney >= totalPrice) {
          this.$message.warning('不可使用大于等于合计金额的优惠劵！')
          return false
        }
        // 如果是折扣券，需要记录，在什么基数上打折
        coupon.useMoney = totalPrice
        let promotionInfoDTO = {}
        if (coupon.couponId) {
          promotionInfoDTO['couponId'] = coupon.couponId
          promotionInfoDTO['ifAdd'] = coupon.ifAdd
          promotionInfoDTO['couponType'] = coupon.couponType
          promotionInfoDTO['reduceMoney'] = coupon.reduceMoney
        }
        this.promotionInfoDTO = promotionInfoDTO
        this.isShowDiscount = false
        this.checkedPlatformCoupon = coupon
        matchCouponSkuList.forEach(item => {
          item.buyerCouponId = coupon.couponId
        })
        this.getTotal()
        // 选中优惠券
        coupon.checked = true
      }
    },
    // 校验商家券是否满足使用条件
    // 后续该方法的维护直接从uniapp端的代码复制过来
    useShopCoupon(shopIndex, couponIndex) {
      const curShop = this.settlement.shops[shopIndex]
      curShop.totalAfterDiscount = 0
      let curCoupon
      if (curShop.shopCoupons && curShop.shopCoupons.length > 0) {
        curCoupon = curShop.shopCoupons[couponIndex]
      }
      if (!curCoupon) {
        return false
      }
      let useCoupon = false
      let matchCouponNormalSkuList = []
      let matchCouponPriceSkuList = []
      if (curCoupon.applyType !== 1) {
        const ids = curCoupon.ids
        let skuLength = curShop.skus.length
        // 符合优惠券商品列表中的普通sku价格综合
        let matchCouponNormalPrice = 0
        // 符合定价捆绑且在优惠券商品列表中的价格综合
        let matchCouponPricePrice = 0
        // 符合定价捆绑活动的sku数量
        let priceCount = 0
        for (let idx = 0; idx < skuLength; idx++) {
          let curSku = curShop.skus[idx]
          if (curSku.priceId > 0) {
            priceCount++
          }
          if (ids.indexOf(curSku.productId) > -1) {
            if (curSku.priceId > 0) {
              matchCouponPriceSkuList.push(curSku)
            } else {
              matchCouponNormalSkuList.push(curSku)
              matchCouponNormalPrice = matchCouponNormalPrice + curSku.price * curSku.number
            }
          }
        }
        // 如果定价捆绑的所有sku都符合优惠券
        if (priceCount === matchCouponPriceSkuList.length) {
          matchCouponPricePrice = curShop.priceAfterDiscount
        }
        // 符合的sku的price加起来是否满足满减的条件
        const priceFinal = matchCouponPricePrice + matchCouponNormalPrice
        if (
          priceFinal < curCoupon.fullMoney ||
          (curCoupon.couponType === 1 && priceFinal <= curCoupon.reduceMoney)
        ) {
          return false
        }
        // 判断是满减，还是折扣
        if (curCoupon.couponType === 1) {
          curShop.totalAfterDiscount = curShop.total - curCoupon.reduceMoney
          curCoupon.discountAmount = curCoupon.reduceMoney
          useCoupon = true
        } else {
          // 打折后优惠抵扣的金额
          let priceDiscount = (priceFinal * ((10 - curCoupon.reduceMoney) / 10)).toFixed(2)
          let tmpTotal = curShop.total - priceDiscount
          if (tmpTotal.toFixed(2) >= 0.01) {
            curShop.totalAfterDiscount = tmpTotal.toFixed(2)
            curCoupon.discountAmount = priceDiscount
            useCoupon = true
          }
        }
        if (useCoupon) {
          // 满足的sku设置buyerShopCouponId
          if (priceCount === matchCouponPriceSkuList.length) {
            let length1 = matchCouponPriceSkuList.length
            for (let idx = 0; idx < length1; idx++) {
              matchCouponPriceSkuList[idx].buyerShopCouponId = curCoupon.shopCouponId
            }
          }
          let length2 = matchCouponNormalSkuList.length
          for (let idx = 0; idx < length2; idx++) {
            matchCouponNormalSkuList[idx].buyerShopCouponId = curCoupon.shopCouponId
          }
        }
      } else {
        if (curCoupon.couponType === 1) {
          if (curShop.total > curCoupon.reduceMoney) {
            curShop.totalAfterDiscount = curShop.total - curCoupon.reduceMoney
            curCoupon.discountAmount = curCoupon.reduceMoney
            useCoupon = true
          }
        } else {
          if (curShop.total > curCoupon.fullMoney) {
            let priceDiscount = (curShop.total * ((10 - curCoupon.reduceMoney) / 10)).toFixed(2)
            let tmpTotal = curShop.total - priceDiscount
            if (tmpTotal.toFixed(2) >= 0.01) {
              curShop.totalAfterDiscount = tmpTotal.toFixed(2)
              curCoupon.discountAmount = priceDiscount
              useCoupon = true
            }
          }
        }
        if (useCoupon) {
          let skuLength = curShop.skus.length
          for (let idx = 0; idx < skuLength; idx++) {
            curShop.skus[idx].buyerShopCouponId = curCoupon.shopCouponId
          }
        }
      }
      return useCoupon
    },
    /**
     * 计算总价，商家券的优惠计算，在调用本方法之前已经计算好在shops[].totalAfterDiscount
     * 本方法参考uniapp的方法即可
     */
    getTotal() {
      this.totalPrice = 0
      this.totalCount = 0
      let shopSumPrice = 0
      let shopsLen = this.settlement.shops.length
      this.calcCouponShopAmount()

      for (let i = 0; i < shopsLen; i++) {
        this.totalPrice += parseFloat(this.settlement.shops[i].totalAfterDiscount)
        shopSumPrice += parseFloat(this.settlement.shops[i].totalAfterDiscount)
        this.totalCount += this.settlement.shops[i].number
      }

      this.calcCouponAmount()
      if (this.checkedPlatformCoupon) {
        this.totalPrice = shopSumPrice - this.couponAmount
      }
      // 加上每个商家的运费
      this.settlement.shops.forEach(item => {
        this.totalPrice = this.totalPrice + (item.distribution.distributionPrice || 0)
        this.priceOriginal = this.totalPrice
      })
      this.calcCard()
    },
    getShopTotal() {
      let total = 0
      this.settlement.shops.forEach(shop => {
        total += parseFloat(shop.total)
      })
      return total
    },
    // 计算商家券优惠金额
    calcCouponShopAmount() {
      if (!this.selectShopCoupon || this.selectShopCoupon.length === 0) {
        this.couponShopAmount = 0
      }
      let tmpAmount = 0
      this.selectShopCoupon.forEach(coupon => {
        tmpAmount += coupon.discountAmount
      })
      this.couponShopAmount = tmpAmount
    },
    // 计算平台券优惠金额
    calcCouponAmount() {
      let tmpAmount = 0
      if (this.checkedPlatformCoupon) {
        if (this.checkedPlatformCoupon.couponType === 1) {
          tmpAmount = this.checkedPlatformCoupon.reduceMoney
        } else {
          tmpAmount = (
            this.checkedPlatformCoupon.useMoney *
            ((10 - this.checkedPlatformCoupon.reduceMoney) / 10)
          ).toFixed(2)
        }
      }
      this.couponAmount = parseFloat(tmpAmount)
    },
    // 选择支付方式
    selectPay(payType) {
      if (payType === 'weChat') {
        this.checkedState = false
      }
      if (payType === 'weChat1') {
        this.checkedState = true
      }
      this.payType = payType
    },
    clickTips() {
      this.$message.warning('当前地址不支持配送，请参与红色字提示！')
    },
    // 提交支付
    clickPayOrder() {
      this.errorDialog = false
      if (this.payType === '') {
        this.$message.warning('请选择支付方式')
      } else if (this.currentAddressId === '') {
        this.$message.warning('请选择您的收货地址')
      } else {
        let shops = []
        this.settlement.shops.forEach((j, i) => {
          let skus = []
          j.skus.forEach((k, n) => {
            if (k.selected) {
              skus.push({
                skuId: k.skuId,
                number: k.number,
                selected: k.selected,
                platformSeckillId: k.platformSeckillId,
                platformDiscountId: k.platformDiscountId,
                shopSeckillId: k.shopSeckillId,
                shopDiscountId: k.shopDiscountId,
                priceId: k.priceId,
                composeId: k.composeId,
                sceneId: k.sceneId,
                useMember: k.useMember,
                buyerCouponId: k.buyerCouponId,
                buyerShopCouponId: k.buyerShopCouponId
              })
              if (this.checkedState) {
                // let integralNum = Math.ceil(k.total / this.integralRatio) // 需要的积分
                // console.log(integralNum)
                // return
                let arr = []
                for (let key in this.settlement.skuCreditMap) {
                  arr.push(this.settlement.skuCreditMap[key])
                }
                let integralNum = arr[n]
                if (integralNum <= this.integralAvai) {
                  skus[n]['useCredit'] = integralNum
                  skus[n]['useCreditAmount'] = k.total
                  this.integralAvai -= integralNum
                }
                if (integralNum > this.integralAvai) {
                  if (this.integralAvai === 0) return
                  skus[n]['useCredit'] = this.integralAvai
                  skus[n]['useCreditAmount'] =
                    Math.floor(this.integralAvai * this.integralRatio * 100) / 100
                  this.integralAvai = 0
                }
                // skus[n]['useCredit'] = this.integralAvai - k.total * this.integralRatio
                // skus[n]['useCreditAmount'] = this.deductionMoney
              }
            }
          })
          if (skus.length) {
            shops.push({
              id: j.id,
              shopId: j.shopId,
              remark: j.remark,
              distribution: {
                distributionPrice: j.distribution.distributionPrice,
                logisticsId: j.distribution.logisticsId,
                distributionName: j.distribution.distributionName
              },
              skus
            })
          }
        })
        // console.log(shops)
        // console.log(this.couponAmount, this.couponShopAmount)
        // 处理优卡抵扣
        if (this.infoCommodity[0].shopId == 225 && this.checkedStateCard) {
          this.submitData.cardId = this.cardId
          this.submitData.discountMoney = this.moneyPrice
        } else {
          this.submitData.cardId = this.cardId
          this.submitData.discountMoney = 0
        }
        // return
        this.submitData.shops = shops
        this.submitData.receiveId = this.currentAddressId
        this.submitData.price = this.totalPrice.toFixed(2)
        if (this.payType == 'weChat') {
          this.submitData.paymentMode = 1
        } else if (this.payType == 'alipay') {
          this.submitData.paymentMode = 2
        }
        // 优惠总额 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
        this.submitData.discountPrice = parseFloat(
          (this.couponAmount + this.couponShopAmount).toFixed(2) || 0
        )
        // this.submitData.discountPrice = parseFloat((this.couponAmount + this.couponShopAmount + this.deductionMoney).toFixed(2) || 0)
        this.submitData.remark = this.settlement.shops[0].remark
        if (this.activityType === 1 && this.ifWork !== 1) {
          this.submitData.shopGroupWorkId = this.workData.shopGroupWorkId
          this.submitData.type = 1
          if (this.workData.collageId) {
            this.submitData.collageId = this.workData.collageId
            this.submitData.type = 2
          }
        } else if (this.activityType === 2) {
          this.submitData.shopSeckillId = this.paramShops[0].shopSeckillId
          this.submitData.type = 3
        } else if (this.activityType === 3) {
          this.submitData.shopDiscountId = this.paramShops[0].shopDiscountId
          this.submitData.type = 4
        }
        // if (this.checkedState) {
        //   this.submitData.discountPrice = this.deductionMoney
        // }
        // console.log(this.submitData)
        // return
        this.orderSubmit(this.submitData, 'submitData')
      }
    },
    // 提交订单
    async orderSubmit(subData) {
      console.log(subData)
      // return
      subData.couponId =
        this.promotionInfoDTO && this.promotionInfoDTO.couponId > 0
          ? this.promotionInfoDTO.couponId
          : 0
      this.btnLoading = true
      const response = await orderSubmit(subData)
      const res = response.data
      // console.log('res')
      // console.log(res)
      // return
      if (res.code === '200') {
        this.payInfo = res.data
        if (this.type === 2 || this.type === '2') {
          let ids = []
          subData.shops.forEach(i => {
            i.skus.forEach(j => {
              ids.push(j.skuId)
            })
          })
          deleteCartItem({ ids }).then(res => {
            if (res.data.code === '200') {
              this.getTrolleyList()
            }
          })
        }
        if (res.data.money <= 0) {
          await paymentFreeAPI(this.payInfo)
          this.$message({
            message: '支付成功！',
            type: 'success'
          })
          // clearInterval(this.chatTimer)
          this.getTrolleyList()
          // 支付有礼跳转
          this.$router.push({ path: '/orderResult', query: { orderId: res.data.orderId } })
        }
        if (this.payType == 'weChat') {
          this.weChatDialog = true
        } else if (this.payType == 'alipay') {
          // console.log()
          window.open(res.data.url)
        }
        this.chatTimer = setInterval(() => {
          this.checkPay(res.data)
        }, 3000)
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        })
      }
      this.btnLoading = false
    },
    // 查询订单是否支付成功
    checkPay(paramsData) {
      setTimeout(() => {
        checkOrderResult({
          collageId: paramsData.collageId,
          money: paramsData.money,
          orderId: paramsData.orderId,
          type: 1
        }).then(response => {
          const res = response.data
          if (res.code === '200') {
            if (res.data.code === 'SUCCESS') {
              this.$message({
                message: '支付成功！',
                type: 'success'
              })
              clearInterval(this.chatTimer)
              this.getTrolleyList()
              // 支付有礼跳转
              this.$router.push({ path: '/orderResult', query: { orderId: paramsData.orderId } })
            }
          } else {
            clearInterval(this.chatTimer)
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }, 0)
    },
    // 获取购物车列表
    async getTrolleyList() {
      const response = await getCartList()
      const res = response.data
      let cartNumber = 0
      if (res.data.length) {
        res.data.forEach(j => {
          cartNumber = cartNumber + j.skus.length
        })
      }
      this.setShoppingCart(res.data)
      this.setCartNumber(cartNumber)
    },
    // 取消支付
    handleClose() {
      this.$confirm('确认取消支付？')
        .then(_ => {
          clearInterval(this.chatTimer)
          this.weChatDialog = false
          this.errorDialog = true
        })
        .catch(_ => {})
    },
    toOrder() {
      this.$router.push({ path: '/myOrder' })
    }
  }
}
</script>

<style lang="scss" scoped>
.placeOrder {
  margin: 20px auto;
  .poAddressList {
    width: 100%;
    border: 1px solid #f5f5f5;
    // padding: 20px;
    margin-bottom: 30px;
    box-sizing: border-box;
    .poAddListTit {
      height: 80px;
      background-color: #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span:nth-child(1) {
        color: #333333;
        font-size: 16px;
        margin-left: 30px;
      }
      span:nth-child(2) {
        color: $mainGlod;
        font-size: 14px;
        cursor: pointer;
        margin-right: 30px;
      }
    }
    .poAddListBox {
      height: 130px;
      margin: 20px 30px 0 30px;
      font-family: Microsoft YaHei;
      .title {
        font-size: 16px;
        color: #333333;
      }
      .addressItem {
        height: 40px;
        margin: 30px auto 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .addressInfo {
          display: flex;
          align-items: center;
          cursor: default;
          .userName {
            display: block;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #b39259;
            background-color: rgba($color: #c5aa7b, $alpha: 0.1);
          }
          .userAddress {
            margin: 0 30px 0 20px;
            max-width: 400px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .changeAddress {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #ffebc4;
          background-color: #333333;
          cursor: pointer;
        }
      }
    }
  }
  >>> .el-dialog {
    // .el-dialog__body {
    //   background: #F8F8F8;
    // }
    .el-dialog__header {
      text-align: center;
    }
    .el-dialog__footer {
      text-align: center;
      .dialog-footer {
        text-align: center;
        button {
          height: 45px;
          width: 160px;
        }
        .combtns {
          width: 200px;
          height: 50px;
          background: #f3f4f5;
          border-radius: 0px;
        }
        .btnBlack {
          color: $mainGlod;
          background: #333333;
        }
      }
    }
  }
  .addressTable {
    width: 100%;
    max-height: 415px;
    overflow-y: auto;
    .addressListItem {
      height: 80px;
      padding: 15px 20px;
      margin-bottom: 15px;
      border: 1px solid #f3f4f5;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .com {
        display: flex;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #999999;
        .left {
          flex: 1;
        }
      }
      .left {
        span {
          color: #333333;
        }
        .defTip {
          width: 70px;
          height: 25px;
          padding: 10px;
          color: #fff;
          background-color: $mainGlod;
          cursor: default;
        }
      }
      .setDef {
        cursor: pointer;
      }
    }
    .addressActive {
      background: rgba(197, 170, 123, 0.26);
      border: 1px solid #c5aa7b;
    }
    .colorActive {
      color: $mainGlod;
    }
  }
  .shoplist {
    .shopTitle {
      line-height: 80px;
      padding-left: 30px;
      background-color: #fafafa;
    }
  }
  .orderList {
    background: #fcfcfc;
    border: 1px solid #e5e5e5;
    margin-bottom: 25px;
    .orderInfoTit {
      width: 100%;
      display: flex;
      height: 44px;
      line-height: 44px;
      color: #333333;
      font-size: 14px;
      font-weight: 400;
    }
    span {
      text-align: center;
    }
    span:nth-child(1) {
      width: 40%;
      text-align: left;
      padding-left: 125px;
      box-sizing: border-box;
    }
    span:nth-child(2) {
      width: 20%;
      text-align: left;
    }
    span:nth-child(3) {
      width: 15%;
    }
    span:nth-child(4) {
      width: 15%;
    }
    span:nth-child(5) {
      width: 10%;
    }
    span:nth-child(6) {
      width: 10%;
    }
  }
  .couponContainer {
    margin-bottom: 30px;
    height: 100%;
    margin-top: 30px;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid #f3f4f5;
    p {
      padding-left: 30px;
      line-height: 80px;
      font-size: 16px;
      background-color: #fafafa;
    }
    .couponItem {
      width: 280px;
      height: 88px;
      margin: 15px;
      float: left;
      cursor: pointer;
      position: relative;
      box-sizing: border-box;
      display: flex;
    }

    .svg-icon {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
    }
    .des {
      flex: 8;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .nums {
        flex: 4;
        text-align: right;
        .money {
          font-size: 40px;
        }
      }
      .cloumn {
        flex: 6;
        display: flex;
        flex-direction: column;
        margin-left: 8px;
      }
    }
    .aside {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      .checkBox {
        width: 20px;
        height: 20px;
        border: 1px solid #e8e9eb;
      }
    }
    .marginR {
      margin-right: 13px;
    }
  }
  .payBox {
    .payTit {
      padding-left: 30px;
      line-height: 80px;
      font-size: 16px;
      color: #333333;
      background-color: #fafafa;
    }
    .payList {
      height: 120px;
      padding: 0 20px;
      border: 2px solid #f3f4f5;
      display: flex;
      align-items: center;
      .typeBox {
        display: block;
        width: 150px;
        height: 60px;
        margin: 0 20px;
        color: #666666;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
        i {
          font-size: 26px;
          margin-right: 5px;
        }
        b {
          color: $mainGlod;
          position: absolute;
          right: -1px;
          bottom: -1px;
          display: none;
        }
      }
      .payActive {
        border: 1px solid $mainGlod;
        b {
          display: block;
        }
      }
      span {
        border: 1px solid #e5e5e5;
        padding: 5px 10px;
        margin-right: 15px;
      }
      span:nth-child(1) {
        i:nth-child(1) {
          color: #1c72f3;
          cursor: pointer;
        }
      }
      span:nth-child(2) {
        i {
          color: #40ba49;
          // color: rgb(253, 172, 23);
        }
      }
    }
  }
  // 提交订单部分
  .placeOrderBtn {
    margin-top: 50px;
    width: 100%;
    padding: 30px 0;
    .payInfo {
      padding: 0 15px;
      line-height: 70px;
      border: 2px solid #f3f4f5;
      display: flex;
      span {
        display: block;
        font-size: 14px;
        color: #333333;
        margin-left: 100px;
      }
      span:nth-child(1) {
        margin-left: 0;
      }
      span:nth-child(4) {
        b {
          color: $mainGlod;
        }
      }
    }
    .submitOrder {
      display: block;
      width: 200px;
      height: 50px;
      margin: 40px auto 0;
      padding: 0;
      background-color: #333;
      color: #ffebc4;
      border-radius: 0;
    }
    .unDisButton {
      opacity: 0.6;
    }
  }
  // 提交订单部分
  .placeOrderBtn1 {
    margin-top: 50px;
    width: 100%;
    padding: 30px 0;
    .payInfo {
      padding: 0 15px;
      line-height: 70px;
      border: 2px solid #f3f4f5;
      display: flex;
      span {
        // display: block;
        font-size: 18px;
        color: orange;
        margin-left: 100px;
        font-weight: 600;
      }
      span:nth-child(1) {
        margin-left: 0;
      }
      span:nth-child(4) {
        b {
          color: $mainGlod;
        }
      }
    }
    .submitOrder {
      display: block;
      width: 200px;
      height: 50px;
      margin: 40px auto 0;
      padding: 0;
      background-color: #333;
      color: #ffebc4;
      border-radius: 0;
    }
    .unDisButton {
      opacity: 0.6;
    }
  }
  .payment {
    width: 80%;
    margin: 0 auto;
    .paymentBox {
      margin-top: 50px;
      display: flex;
      justify-content: center;
      .successBox,
      .errorBox {
        width: 240px;
        text-align: center;
      }
      .successBox {
        border-right: 1px solid #dddddd;
        >>> .el-button {
          border: 1px solid $mainGlod;
        }
      }
      span {
        display: block;
        margin-bottom: 20px;
      }
    }
    .paymentInfo {
      text-align: center;
      margin-top: 60px;
      p {
        font-size: 16px;
        color: #999999;
        line-height: 30px;
        b {
          color: #ff7800;
          cursor: pointer;
          font-weight: normal;
        }
      }
    }
  }
  // 微信支付弹框
  .weChat {
    >>> .el-dialog__body {
      background: #ffffff;
      .qCode {
        .wechatTitle {
          width: 280px;
          margin: auto;
          padding: 10px 15px;
          color: #333;
          border: 2px solid #f3f4f5;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .tips {
            flex: 1;
          }
        }
        .code {
          width: 280px;
          height: 280px;
          display: block;
          margin: 10px auto;
          border: 2px solid #f3f4f5;
        }
      }
    }
  }
  .errorDialog {
    text-align: center;
    .errorTit {
      span {
        font-size: 50px;
        color: red;
      }
      p {
        margin: 30px 0;
      }
    }
    span {
      display: block;
    }
    .btns {
      border-radius: 0;
      background-color: #f3f4f5;
    }
    .pay {
      color: #ffebc4;
      background-color: #333;
    }
  }
  .remarksBox {
    display: flex;
    background: #f7f7f7;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    .remarksInfo {
      width: 100%;
      >>> .el-textarea__inner {
        width: 100%;
        height: 84px;
      }
    }
    .selectBox {
      margin-left: 70px;
      label {
        color: #666666;
        font-size: 16px;
        font-weight: normal;
      }
    }
    .shopTotal {
      color: $mainGlod;
      flex: 1;
      text-align: right;
    }
  }
}
</style>
